let apiData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]
// 拿到API标签
let api = document.querySelector(".api")
let html = ""
// console.log(api);
apiData.forEach(function (v) {
    // console.log(v);
    html += `<span keyword="${v.keyword}" class='${v.isnew ? "api-span" : ""}'>${v.name}</span>`
})
// console.log(html);
// 将拼接好的页面渲染到页面上
api.innerHTML += html
let input = document.querySelector("input")
let strong = document.querySelector(".whole strong")
let span = document.querySelectorAll(".api span")

span.forEach(function (v) {
    v.addEventListener("click", function (e) {
        // console.log(e.target);
        input.value = e.target.getAttribute("keyword")
        strong.innerHTML = v.innerHTML

    })


})

// API列表
listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]

let apiList = document.querySelector(".api-meth")
let apiListHtml = ""

listDataArr.forEach(function (v) {
    // console.log(v.img);
    apiListHtml += `<li class="api-item">
    <i class='${v.isSpecial ? "specific-block" : "specific-none"}'>企业专用</i>
    <a class="aa" href="APIdetails.html">
        <img src="./imgs/${v.img}" alt="">
        <p>${v.name}</p>
        <span>${v.price}</span>
    </a>
    <em>申请数据</em>
</li>`
})

apiList.innerHTML = apiListHtml

// 点击申请数据,出现登录窗口
let btnEm = document.querySelector(".api-meth")
let mst = document.querySelector(".mst")
btnEm.addEventListener("click", function (e) {
    // console.log(e.target);
    if (e.target.nodeName === "EM") {
        mst.style.display = "flex"
    }

})
// 点击模态框,登录窗口以及模态框关闭
mst.addEventListener("click", function (e) {
    // console.log(e.target);
    if (e.target.className === "mst") {
        mst.style.display = "none"
    }
})
// 点击账号登录或者扫码登录切换
let loginss = document.querySelectorAll(".login-box div")
let loginqwer = document.querySelectorAll(".loginqwer")
let index = 0
// console.log(loginqwer);
// console.log(loginss);
loginss.forEach(function (v, i) {
    // console.log(v);
    v.addEventListener("click", function () {
        loginss[index].className = ""
        loginqwer[index].style.display = "none"
        v.className = "loginss"
        loginqwer[i].style.display = "flex"
        index = i
    })

})
